// 
import React,{useEffect,useState} from 'react';
import {MemberEntity} from '../model/member';
import { getMembersCollection } from '../api/memberApi';

const useMemberCollection = () => {
    const [memberCollection,setMemberCollection] = useState<MemberEntity[]>([]);
    
    const loadMemberCollection = async () => {
        const newMemberCollection = await getMembersCollection();
        setMemberCollection(newMemberCollection);
    }

    return {memberCollection,loadMemberCollection}
}

export const MemberTable = (props:any) => {

    const {memberCollection,loadMemberCollection} = useMemberCollection();
    
    
    useEffect( () => {
        loadMemberCollection();
    },[])
    return (
        <>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Login</th>
                        <th>Avatar</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        memberCollection.map(item => {
                            return <MemberRow key={item.id} member={item} />
                        })
                    }
                </tbody>
            </table>
        </>
    )
}

const MemberRow = ({member}:{member:MemberEntity}) => {

    return (

        <tr>
            <th>{member.id}</th>
            <th>{member.login}</th>
            <th><img src={member.avatar_url} style={{maxWidth:"10rem"}}/></th>
        </tr>
    )
}